<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>简历</title>
  </head>
  <body>
    <div id="c">


    </div>
    <script>
      let u1 = {
        //user的结构
        username: '海淀梁朝伟', // 用户名
        userId: 19318, // 用户id
        theme: 'light', // 主题名
        favorite: '看书', // 爱好
        birthday: '1993-12-28', // 生日
        age: 28, // 年龄
        avatar:
          'https://tva1.sinaimg.cn/large/008i3skNgy1gq9wsodlenj30gc0ji14m.jpg', // 头像
        hometown: '河北省保定市', // 家乡
        // 工作经验
        jobs: [
          {
            company: '北京格致璞科技有限公司',
            from: '2018-09',
            to: '2019-06',
          },
          {
            company: '北京豆网科技有限公司',
            from: '2019-06',
            to: '2019-12',
          },
          {
            company: '值得买科技',
            from: '2019-12',
          },
        ],
        // 技能
        skills: [
          ['css3', '精通'],
          ['javascript', '熟练'],
          ['html', '精通'],
        ],
        // 自我介绍, 要求：
        //    < 要替换成 &lt;
        //    > 要替换成 &gt;
        // XSS
        //    \n要替换成<br/>
        // String.replace(/\n/g, '<br />')

        description: `• 性格<u>严谨</u>，一丝不苟。注重细节。具有大局观和一定的领导组织能力。
         • 对于前沿科技具有浓厚的兴趣，具有一定的创新能力。
         • 勤奋、努力，有志于长期从事相关工作`,
      }

      function toHtml(user) {
        return `<div class="user theme-${user.theme}">
        <table border="1">
          <tr>
            <td>用户名</td>
            <td>${user.username}
              <a href="detail?userId=${user.userId}">[详情页]</a></td>
          </tr>
          <tr>
            <td>照片</td>
            <td><img src='${user.avatar}' style="width: 180px;"/></td>
          </tr>
          <tr>
            <td>生日</td>
            <td>${user.birthday}</td>
          </tr>
          <tr>
            <td>年龄</td>
            <td>${user.age}</td>
          </tr>
          <tr>
            <td>家乡</td>
            <td>河北省保定市</td>
          </tr>
          <tr>
            <td>爱好</td>
            <td>看书</td>
          </tr>
          <tr>
            <td>工作经验</td>
            <td>
              <div>
                <ul>
                  ${
                    user.jobs.map(function(job) {
                      return job.to ?
                        `<li>${job.company}(从${job.from}到${job.to})</li>` :   `<li>${job.company}(从${job.from}至今)</li>`
                    }).join('')
                  }

                </ul>
              </div>
            </td>
          </tr>
          <tr>
            <td>工作技能</td>
            <td>
              <ul>
                ${
                  user.skills.map(function(skill) {
                    return `<li>${skill[0]}: ${skill[1]}</li>`
                  }).join('')
                }
              </ul>
            </td>
          </tr>
          <tr>
            <td>自我介绍</td>
            <td>${
              user.description
                .replaceAll('>', '&gt;')
                .replaceAll('<', '&lt;')
                .replaceAll('\n', '<br/>')
            }
            </td>
          </tr>
        </table>
      </div>`
      }

      function render() {
        document.getElementById('c').innerHTML =
          toHtml(u1)
      }
      render()

      console.log([u1, u1, u1].map(toHtml))

    </script>


  </body>
</html>
